import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/components/single_picker.dart';
import 'package:share_fit/app/controllers/device/device_const.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';
import 'package:sprintf/sprintf.dart';

import 'spo2_setting_logic.dart';

class Spo2SettingPage extends StatelessWidget {
  ///血氧设置页面
  Spo2SettingPage({super.key});

  final logic = Get.put(Spo2SettingLogic());
  final state = Get.find<Spo2SettingLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.settings_spo2.ts),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back())
      ),
      body: Padding(
        padding: EdgeInsets.only(left: 40.w, top: 80.h, right: 40.w),
        child: ListView(
          children: [
            Container(
              height: 175.h,
              padding: EdgeInsets.only(left: 59.w, right: 36.w),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      LocaleKeys.settings_spo2_enable.ts,
                      style: TextStyle(
                          fontSize: 42.sp, color: ColorConst.primaryFontColor),
                    ),
                    Transform.scale(
                        scale: 0.7,
                        child: Obx(() => CupertinoSwitch(
                            value: state.isContinuousBloodOxygen.value,
                            activeColor: ColorConst.accentColor,
                            onChanged: (value) {
                              logic.setContinuousBloodOxygenEnable(value);
                            }))),
                  ]),
            ),
            SizedBox(height: 75.h),
            /// sdk不支持，暂时屏蔽
            // _buildTimeAndPeriodWidget(context)
          ],
        ),
      ),
    );
  }

  Widget _buildTimeAndPeriodWidget(BuildContext context) {
    return Container(
      height: 495.h,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          InkWell(
            child: Container(
              height: 247.h,
              padding:
              EdgeInsets.only(left: 59.w, top: 48.h, right: 36.w),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Column(
                children: [
                  Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          LocaleKeys.settings_time_slot.ts,
                          style: TextStyle(
                              fontSize: 42.sp,
                              color: ColorConst.primaryFontColor),
                        ),
                        Expanded(child: Container()),
                        Obx(() => Text(
                          sprintf(
                              LocaleKeys
                                  .settings_time_slot_subtitle.ts,
                              [
                                state.startTime.value,
                                state.endTime.value
                              ]),
                          style: TextStyle(
                              fontSize: 42.sp,
                              color: ColorConst.primaryFontColor),
                        )),
                        SizedBox(width: 40.w),
                        const Icon(
                          Icons.arrow_forward_ios,
                          size: 14,
                        ),
                      ]),
                  SizedBox(height: 30.h),
                  Container(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      LocaleKeys.settings_time_slot_tips.ts,
                      style: TextStyle(
                          fontSize: 36.sp,
                          color: ColorConst.secondaryFontColor),
                    ),
                  ),
                ],
              ),
            ),
            onTap: () async {
              var result = await Get.toNamed(
                  "/device/settings/time_slot",
                  arguments: {
                    DeviceConst.keyStartTime: state.startTime.value,
                    DeviceConst.keyEndTime: state.endTime.value
                  });

              if (result[DeviceConst.changed]) {
                state.startTime.value =
                result[DeviceConst.keyStartTime];
                state.endTime.value = result[DeviceConst.keyEndTime];
              }
            },
          ),
          Container(
            width: double.infinity,
            height: 1.h,
            decoration: const BoxDecoration(
              color: Colors.grey,
            ),
          ),
          InkWell(
            child: Container(
              height: 247.h,
              padding:
              EdgeInsets.only(left: 59.w, top: 48.h, right: 36.w),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Column(
                children: [
                  Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          LocaleKeys.settings_spo2_period.ts,
                          style: TextStyle(
                              fontSize: 42.sp,
                              color: ColorConst.primaryFontColor),
                        ),
                        Expanded(child: Container()),
                        Obx(() => Text(
                          sprintf(
                              state.showHour.value ? LocaleKeys
                                  .settings_spo2_period_subtitle_hour.ts: LocaleKeys
                                  .settings_spo2_period_subtitle_min.ts,
                              [state.period.value]),
                          style: TextStyle(
                              fontSize: 42.sp,
                              color: ColorConst.primaryFontColor),
                        )),
                        SizedBox(width: 40.w),
                        const Icon(
                          Icons.arrow_forward_ios,
                          size: 14,
                        ),
                      ]),
                  SizedBox(height: 30.h),
                  Container(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      LocaleKeys.settings_spo2_period_tips.ts,
                      style: TextStyle(
                          fontSize: 36.sp,
                          color: ColorConst.secondaryFontColor),
                    ),
                  ),
                ],
              ),
            ),
            onTap: () => _showPicker(
                context, LocaleKeys.settings_spo2_period.ts),
          ),
        ],
      ),
    );
  }
  _showPicker(BuildContext context, title) {
    var index = state.picklistData.indexOf(state.periodMin.value);
    var initValue = state.picklistShow[index];
    SinglePicker.showPicker(context, title, state.picklistShow, initValue,
        (index, value) => _onPickerConfirm(index, value));
  }

  void _onPickerConfirm(index, value) {
    var min = state.picklistData[index];
    logic.setPeriod(min);
  }
}
